{% load i18n %}

<div class="modal fade modal-emoji" tabindex="-1" aria-labelledby="modalInsertEmojiTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content emoji-content-base">
      <div class="modal-header bg-light">
        <h5 class="modal-title" id="modalInsertEmojiTitle">
          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-info-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
            <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/>
            <circle cx="8" cy="4.5" r="1"/>
          </svg>
          <span class="ms-1">{% trans "Select Emoji to Insert" %}</span>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body emoji-content-base">
        <div class="text-center emoji-loader-init" style="display:none">
          <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <div>{% trans "Preparing emojis..." %}</div>
        </div>
        <div class="row p3 emoji-content-body" style="display:none"></div>
      </div>
    </div>
  </div>
</div>
